import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      redirect: "/home",
      children: [
        {
          path: "/home",
          component: () => import("../views/HomeView.vue"),
          meta: { keepAlive: true, title: "name" }, // 需要缓存
        },
      ],
    },
    {
      path: "/ref",
      name: "ref",
      component: () => import("../views/Ref.vue"),
      meta: { keepAlive: false, title: "ref" }, // 不需要缓存
    },
    {
      path: "/isRef",
      name: "isRef",
      component: () => import("../views/IsRef.vue"),
    },
    {
      path: "/shallowRef",
      name: "shallowRef",
      component: () => import("../views/ShallowRef.vue"),
    },
    {
      path: "/toRef",
      name: "toRef",
      component: () => import("../views/toRef.vue"),
    },
    {
      path: "/toRefs",
      name: "toRefs",
      component: () => import("../views/toRefs.vue"),
    },
    {
      path: "/toRaw",
      name: "toRaw",
      component: () => import("../views/toRaw.vue"),
    },
    {
      path: "/computed",
      name: "computed",
      component: () => import("../views/Computed.vue"),
    },
    {
      path: "/watch",
      name: "watch",
      component: () => import("../views/Watch.vue"),
    },
    {
      path: "/watchEffect",
      name: "watchEffect",
      component: () => import("../views/WatchEffect.vue"),
    },
    {
      path: "/template",
      name: "template",
      component: () => import("../views/Template.vue"),
    },
    {
      path: "/lifeCycle",
      name: "lifeCycle",
      component: () => import("../views/LifeCycle.vue"),
    },
    {
      path: "/props",
      name: "props",
      component: () => import("../views/Props.vue"),
    },
    {
      path: "/parent",
      name: "parent",
      component: () => import("../views/Parent.vue"),
    },
    {
      path: "/eventBus",
      name: "eventBus",
      component: () => import("../views/EventBus.vue"),
    },
    {
      path: "/vmodeParent",
      name: "vmodeParent",
      component: () => import("../views/VmodelParent.vue"),
    },
    {
      path: "/component",
      name: "component",
      component: () => import("../views/Component.vue"),
    },
    {
      path: "/asyncComponent",
      name: "asyncComponent",
      component: () => import("../views/AsyncComponent.vue"),
    },
    {
      path: "/transition",
      name: "transition",
      component: () => import("../views/Transition.vue"),
    },
    {
      path: "/transitionGroup",
      name: "transitionGroup",
      component: () => import("../views/TransitionGroup.vue"),
    },
    {
      path: "/keepAlive",
      name: "keepAlive",
      component: () => import("../views/KeepAlive.vue"),
    },
    {
      path: "/teleport",
      name: "teleport",
      component: () => import("../views/Teleport.vue"),
    },
    {
      path: "/recurtionComponent",
      name: "recurtionComponent",
      component: () => import("../views/RecurtionComponent.vue"),
    },
    {
      path: "/myMixins",
      name: "myMixins",
      component: () => import("../views/mymixins/index.vue"),
    },
    {
      path: "/extends",
      name: "extends",
      component: () => import("../views/extends/index.vue"),
    },
    {
      path: "/h",
      name: "h",
      component: () => import("../views/h/index.vue"),
    },
    {
      path: "/jsx",
      name: "jsx",
      component: () => import("../views/jsx/index.vue"),
    },
    {
      path: "/directives",
      name: "directives",
      component: () => import("../views/directives/index.vue"),
    },
    {
      path: "/plugins",
      name: "plugins",
      component: () => import("../views/plugins/index.vue"),
    },
    {
      path: "/scoped",
      name: "scoped",
      component: () => import("../views/scoped/index.vue"),
    },
    {
      path: "/class",
      name: "class",
      component: () => import("../views/class/index.vue"),
    },
    {
      path: "/style",
      name: "style",
      component: () => import("../views/style/index.vue"),
    },
    {
      path: "/vModel",
      name: "vModel",
      component: () => import("../views/vModel/index.vue"),
    },
    {
      path: "/pinia",
      name: "pinia",
      component: () => import("../views/pinia/index.vue"),
    },
    {
      path: "/hooks",
      name: "hooks",
      component: () => import("../views/hooks/index.vue"),
    },
    {
      path: "/nextTick",
      name: "nextTick",
      component: () => import("../views/nextTick/index.vue"),
    },
    {
      path: "/tailWindCss",
      name: "tailWindCss",
      component: () => import("../views/tailWindCss/index.vue"),
    },
  ],
});

export default router;
